<template>
  <el-container class="layout-container-demo">
    <navmenu></navmenu>
    <el-container>
      <el-header style="text-align: right; font-size: 12px">
        <el-radio-group v-model="isCollapse">
          <el-icon size="25px" @click="changeF" v-if="isCollapse"
            ><Expand
          /></el-icon>
          <el-icon size="25px" @click="changeT" v-else><Fold /></el-icon>
        </el-radio-group>

        <el-dropdown @command="quit">
          <span class="el-dropdown-link">
            您好 : {{ userInfo.adminname }}
            <el-icon class="el-icon--right">
              <arrow-down />
            </el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="a">关于</el-dropdown-item>
              <el-dropdown-item command="b">退出</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </el-header>

      <el-main>
        <el-breadcrumb separator="/">
          <el-breadcrumb-item v-for="item in names" :key="item.path">
            {{ item.meta.name }}
          </el-breadcrumb-item>
        </el-breadcrumb>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import { ElMessage } from "element-plus";
import navmenu from "../components/NavMenu.vue";
import { Menu as IconMenu, Message, Setting } from "@element-plus/icons-vue";
export default {
  components: {
    IconMenu,
    Message,
    Setting,
    navmenu,
  },

  data() {
    return {
      names: [],
    };
  },
  watch: {
    $route: {
      handler(n) {
        this.names = n.matched; //记录当前路由对象，包含子路由
      },
      deep: true,
      immediate: true,
    },
  },

  methods: {
    changeT() {
      this.$store.commit("changeTrue");
    },
    changeF() {
      this.$store.commit("changeFalse");
    },
    quit(str) {
      switch (str) {
        case "a":
          ElMessage({
            showClose: true,
            message: "待开发",
            type: "success",
            duration: 1000,
          });
          break;
        case "b":
          ElMessage({
            showClose: true,
            message: "退出成功",
            type: "success",
            duration: 1000,
          });
          localStorage.removeItem("token");
          this.$store.commit("setUserInfo", {});
          this.$router.push("/login");

          break;
        default:
          break;
      }
    },
  },
  computed: {
    isCollapse() {
      return this.$store.state.isCollapse;
    },
    userInfo() {
      return this.$store.state.userInfo;
    },
  },
};
</script>

<style>
.el-main {
  width: 100%;
  height: 100%;
  background-color: #dfe6e9;
}

.el-aside > h4 {
  width: 100%;
  height: 30px;
  line-height: 30px;
  text-align: center;
  color: #fff;
}
.el-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: rgb(0 0 0 /0.2);
}
.el-aside > .el-menu {
  border: none;
}
.el-radio-button__inner {
  font-size: 20px !important;
  padding: 0 !important;
}
</style>
